<template>
  <div class="activity-info">
    <el-card>
      <template #header>
        <div class="header">
          <h3>活动管理</h3>
          <el-button type="primary" @click="handleCreateActivity">创建活动</el-button>
        </div>
      </template>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-card>

    <!-- 创建活动对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="创建活动"
      width="600px"
    >
      <el-form
        ref="activityFormRef"
        :model="activityForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="activityForm.name" />
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="activityForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultStartTime"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="activityForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultEndTime"
          />
        </el-form-item>
        <el-form-item label="活动地点" prop="location">
          <el-input v-model="activityForm.location" />
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-select v-model="activityForm.type" placeholder="选择活动类型">
            <el-option
              v-for="item in activityTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
<!--        <el-form-item label="参与人数" prop="maxParticipants">-->
<!--          <el-input-number-->
<!--            v-model="activityForm.maxParticipants"-->
<!--            :min="1"-->
<!--            :max="1000"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item label="活动描述" prop="description">
          <el-input
            v-model="activityForm.description"
            type="textarea"
            rows="4"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitActivity(activityFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../plugins/myAxios'

const dialogVisible = ref(false)
const activityFormRef = ref()

const activityForm = reactive({
  name: '',
  startTime: '',
  endTime: '',
  location: '',
  type: '',
  // maxParticipants: 100,
  description: ''
})

const defaultStartTime = new Date(2000, 1, 1, 8, 0, 0)
const defaultEndTime = new Date(2000, 1, 1, 18, 0, 0)

const rules = {
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    {
      required: true,
      message: '请选择结束时间',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择结束时间'))
        } else if (activityForm.startTime && value <= activityForm.startTime) {
          callback(new Error('结束时间必须晚于开始时间'))
        } else {
          callback()
        }
      }
    }
  ],
  location: [
    { required: true, message: '请输入活动地点', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择活动类型', trigger: 'change' }
  ]
}

const activityTypes = [
  { label: '文化活动', value: '文化活动' },
  { label: '体育活动', value: '体育活动' },
  { label: '志愿服务', value: '志愿服务' },
  { label: '学术讲座', value: '学术讲座' }
]

const handleCreateActivity = () => {
  dialogVisible.value = true
}

const submitActivity = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('提交的数据：', activityForm)

      myAxios.post('/admin/activity/add', activityForm).then(() => {
        ElMessage.success('活动创建成功')
        dialogVisible.value = false
        formEl.resetFields()
      }).catch(error => {
        ElMessage.error('创建失败：' + error)
      })
    }
  })
}


const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
.activity-info {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-date-picker {
  width: 100%;
}
</style>
